<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right"
      style="user-select: none;padding-left: 10px;padding-bottom: 10px;font-size: 12px;">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 用户列表卡片 -->
    <el-card class="box-card">
      <!-- 表单 -->
      <el-form :inline="true" :model="userVo" class="demo-form-inline">

        <el-row>
          <el-col :span="6">
            <!-- 部门 -->
            <el-form-item label="部门" label-width="70px">
              <el-select v-model="userVo.departmentId" placeholder="请选择">
                <el-option v-for="item in departments" :key="item.id" :label="item.name" :value="item.id">
                  <span style="float: left">{{ item.name }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.deptCount }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 用户名 -->
            <el-form-item label="用户名">
              <el-input v-model="userVo.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 昵称 -->
            <el-form-item label="昵称" label-width="70px">
              <el-input v-model="userVo.nickname" placeholder="请输入昵称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 邮箱 -->
            <el-form-item label="邮箱">
              <el-input v-model="userVo.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <!-- 性别 -->
            <el-form-item style="margin-left: 25px;min-width: 405px;">
              <el-radio v-model="userVo.sex" label="0">帅哥</el-radio>
              <el-radio v-model="userVo.sex" label="1">美女</el-radio>
              <el-radio v-model="userVo.sex" label="">全部</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 按钮 -->
            <el-form-item style="min-width: 405px;">
              <el-button icon="el-icon-refresh" @click="resetUserVo">重置</el-button>
              <el-button type="primary" icon="el-icon-search" @click="getUserList">查询</el-button>
              <el-button type="success" icon="el-icon-plus" @click="show">添加</el-button>
              <el-button type="warning" icon="el-icon-download">导出</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>




      <!-- 表格 -->
      <el-table :data="userList" border max-height="600" style="width: 100%;">
        <el-table-column prop="id" label="#" width="80"></el-table-column>
        <el-table-column prop="username" label="用户名" width="150"></el-table-column>
        <el-table-column prop="sex" label="性别" width="80">
          <template slot-scope="scope">
            <span class="el-tag el-tag--success el-tag--medium el-tag--light">
              {{scope.row.sex==0?'男':(scope.row.sex==1?'女':'保密')}}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="所属部门" width="180"></el-table-column>
        <el-table-column sortable prop="birth" label="生日" width="180">
          <template slot-scope="scope">
            {{scope.row.birth}}
          </template>
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="180"></el-table-column>
        <el-table-column prop="phoneNumber" label="手机号码" width="180"></el-table-column>
        <el-table-column prop="status" label="是否禁用" width="100">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status==1" active-color="#13ce66" inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete"></el-button>
          <el-button type="warning" size="mini" icon="el-icon-s-tools"></el-button>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination style="padding-top: 15px" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="current" :page-sizes="[10, 20, 30, 100]" :page-size="size"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
      <!-- 添加用户弹窗 -->
      <UserAdd :addOrUpdateVisible="addOrUpdateVisible" :departments="departments" @changeShow="showAddOrUpdate"
        ref="addOrUpdateRef" />
    </el-card>
  </div>
</template>

<script>
  import UserAdd from './UserAdd'
  import {
    findUserList
  } from '../../http/api/user'
  import {
    findDeptList
  } from '../../http/api/dept'
  export default {
    name: 'Users',
    components: {
      UserAdd,
    },
    data() {
      return {
        userVo: {
          departmentId: '',
          username: '',
          email: '',
          sex: '',
          nickname: '',
        },
        departments: [],
        // 用户集合
        userList: [],
        //部门集合
        deptList: [],
        //当前页码
        current: 1,
        //每页显示的条数
        size: 10,
        //总条数
        total: 100,
        // 控制新增编辑弹窗的显示与隐藏
        addOrUpdateVisible: false,
      }
    },
    methods: {
      // 提交按钮
      onSubmit() {
        console.log('submit!');
      },
      // 分页
      handleSizeChange(val) {
        this.size = val
        this.getUserList()
      },
      async handleCurrentChange(val) {
        this.current = val
        this.getUserList()
      },
      async getUserList() {
        const ulist = await findUserList(this.current, this.size, this.userVo)
        this.userList = ulist.data.records
        this.total = ulist.data.total
      },
      async getdeptList() {
        const dList = await findDeptList()
        this.departments = dList.data.departments
      },
      // 按钮点击事件 显示新增编辑弹窗组件
      show() {
        this.addOrUpdateVisible = true
      },
      // 监听 子组件弹窗关闭后触发，有子组件调用
      showAddOrUpdate(data) {
        if (data === 'false') {
          this.addOrUpdateVisible = false
        } else {
          this.addOrUpdateVisible = true
        }
      },
      //重置表单
      resetUserVo() {
        this.userVo.username = ''
        this.userVo.departmentId = ''
        this.userVo.email = ''
        this.userVo.nickname = ''
        this.userVo.sex = ''
        this.getUserList()
      },
    },
    created() {
      this.getUserList()
      this.getdeptList()
    }
  }

</script>

<style>

</style>
